<template>
	<view class="container container24934" style="background-image: url('/static/talk_bg.png');">
		<view class="flex flex-wrap diygw-col-24 flex-clz">
			<view v-for="(item,index) in datarows" :key="index" class="flex diygw-col-24 flex-nowrap flex1-clz">
				<view class="flex flex-wrap diygw-col-15 flex-direction-column">
					<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
						<view class="diygw-col-24 text-clz"> {{ item.remark }} </view>
					</view>
					<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex5-clz">
						<view class="flex diygw-col-18">
							<button class="diygw-btn orange radius-xs flex-sub margin-xs button-button-clz" @click="support(item.id)">立即支持</button>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap diygw-col-9 flex-direction-column flex6-clz">
					<image src="/static/global/cat.jpg" class="response diygw-col-24" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				page:1,
				size:10,
				datarows: [],
				count: 0,
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				this.resultApi()
			},
			
			navigateToPage(url) {
				uni.navigateTo({
					url: `${url}`
				})
			},
			async resultApi(){
				const page = this.page
				const size = this.size
				const http_url = '/phonation/' + page + '/' + size
				const result = await this.$http.get(http_url)
				const code = result.code
				if (code == 200) {
					const data = result.data.records
					this.count = result.data.total
					this.datarows = this.datarows.concat(data)
				}
			},
			support(id){
				const token = uni.getStorageSync('token')
				console.log(token)
				if(token){
					uni.navigateTo({
						url:`details?id=`+id
					})
				}else{
					uni.showToast({
						title: '请先登录',
						icon: 'error',
						duration: 2000
					});
					uni.switchTab({
						url:'/pages/user/index'
					})
				}
			}
		},
		onReachBottom() {
			if (this.datarows.length < this.count) {
				this.page++;
				this.getListByTypeId(this.tabsIndex - 1)
			}
		
		},
		onPullDownRefresh() {
			this.init()
		},
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 680rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}
	.flex1-clz {
		background-color: #ffffff;
		margin-left: 10rpx;
		border-bottom-left-radius: 10rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 10rpx;
		margin-top: 10rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.flex4-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.text-clz {
		color: #ffb007;
		font-weight: bold;
		font-size: 34rpx !important;
	}
	.flex5-clz {
		padding-top: 0rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.flex6-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.button-button-clz {
		margin: 6rpx !important;
	}
	.container24934 {
		padding-left: 0px;
		padding-right: 0px;

		// background-image: url(/static/talk_bg.png);
	}
	.container24934 {
	}
</style>
